<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="./plugins/layui/css/layui.css" media="all">
</head>
<style>
    .divtop{
        width: 1113px; height: 40px;border: 1px solid #b7d5df;line-height: 40px;margin:auto;margin-top:5px;
    }
    .layui-table-box, .layui-table-view{
        margin:auto;
    }
</style>
<body>
<div class="divtop">
    <div class="layui-form-item layui-form" >
        <div class="layui-inline" >
            <label class="layui-form-label" >状态:</label>
            <div class="layui-input-inline">
                <select name="quiz" lay-verify="selecttype" lay-search="" lay-filter="selecttype" id="selecttype">
                    <option value="可用">可用</option>
                    <option value="不可用">不可用</option>
                </select>
            </div>
        </div>
        账号：
        <div class="layui-inline" >
            <input class="layui-input" name="name" placeholder="请输入用户账号" id="uName" autocomplete="off">
        </div>

        <div class="layui-inline">
            <input type="checkbox" id="mhcx" name="like[game]"  title="模糊查询">
            <button class="layui-btn layui-btns layui-btn-normal" id="selectpid" data-type="getCheckData" >查询</button>
        </div>
        <button class="layui-btn layui-btns layui-btn-normal" id="selectAll" data-type="getCheckData" >全部查询</button>
    </div>
</div>
<table id="demo" lay-filter="demo"  ></table>
<script type="text/html" id="sexTpl">
    {{#  if(d.astatus ==="可用"){ }}
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="shangjia" style="background-color: #5cb85c">可用中</a>
    {{#  } else { }}
    <a class="layui-btn layui-btn-danger layui-btn-xs"lay-event="xiajia"  style="background-color: #7266BA">不可用</a>
    {{#  } }}
</script>
<script src="plugins/layui/layui.js" charset="utf-8"></script>
<script src="plugins/layui/jquery-3.3.1.min.js"></script>
<script>
    $(function () {
        var table = null;
        layui.use('table', function () {
            var index = layer.load(2, {time: 10 * 100}); //又换了种风格，并且设定最长等待10秒
            table = layui.table;
            //监听工具条
            table.on('tool(demo)', function (obj) {
                var data = obj.data;
                if (obj.event === 'detail') {

                }
                else if (obj.event === 'shangjia') {
                    $.ajax({
                        type: "get",
                        url: "/adminsweb?action=updastatus",
                        async: true,
                        data: {
                            "uid": data.aid,
                            "status": "不可用"
                        },
                        success: function (data) {
                            if (data.msg == "修改成功") {
                                //执行重载
                                table.reload('idsw', {
                                    page: {
                                        curr: 1 //重新从第 1 页开始
                                    }
                                });
                            }
                            layer.msg(data.msg);
                        }
                    });
                }

                else if (obj.event === 'xiajia') {
                    $.ajax({
                        type: "get",
                        url: "/adminsweb?action=updastatus",
                        async: true,
                        data: {
                            "uid": data.aid,
                            "status": "可用"
                        },
                        success: function (data) {
                            if (data.msg == "修改成功") {
                                //执行重载
                                table.reload('idsw', {
                                    page: {
                                        curr: 1 //重新从第 1 页开始
                                    }
                                });
                            }
                            layer.msg(data.msg);
                        }
                    });
                }
            });
            //全部查询
            $("#selectAll").click(function () {
                //进行渲染
                table.render({
                    elem: '#demo'
                    , height: 471
                    , width: 1113
                    , page: true
                    , url: '/adminsweb?action=finAll' //数据接口
                    , cellMinWidth: 150
                    , cols: [[ //表头
                        {type: 'numbers', title: '序号'}
                        , {field: 'aid', title: '编号', align: 'center'}
                        , {field: 'alname', title: '姓名', align: 'center'}
                        , {field: 'aname', title: '账号', align: 'center'}
                        , {field: 'astatus', title: '状态', align: 'center', templet: '#sexTpl', sort: true}
                        , {field: 'right', title: '操作', width: '118', align: 'center', toolbar: '#barDemo'}
                    ]]
                    , id: "idsw"
                });
            })
            //进行渲染
            table.render({
                elem: '#demo'
                , height: 471
                , width: 1113
                , page: true
                , url: '/adminsweb?action=finAll' //数据接口
                , cellMinWidth: 150
                , cols: [[ //表头
                    {type: 'numbers', title: '序号'}
                    , {field: 'aid', title: '编号', align: 'center'}
                    , {field: 'alname', title: '姓名', align: 'center'}
                    , {field: 'aname', title: '账号', align: 'center'}
                    , {field: 'astatus', title: '状态', align: 'center', templet: '#sexTpl', sort: true}
                    , {field: 'right', title: '操作', width: '118', align: 'center', toolbar: '#barDemo'}
                ]]
                , id: "idsw"
            });
        });
        //根据账号查询
        $("#selectpid").click(function () {
            //进行渲染
            table.render({
                elem: '#demo'
                , height: 471
                , width: 1113
                , page: true
                , url: '/adminsweb?action=finname&aname='+$("#uName").val()+"&mhcx="+$("#mhcx").prop("checked")//数据接口
                , cellMinWidth: 150
                , cols: [[ //表头
                    {type: 'numbers', title: '序号'}
                    , {field: 'aid', title: '编号', align: 'center'}
                    , {field: 'alname', title: '姓名', align: 'center'}
                    , {field: 'aname', title: '账号', align: 'center'}
                    , {field: 'astatus', title: '状态', align: 'center', templet: '#sexTpl', sort: true}
                    , {field: 'right', title: '操作', width: '118', align: 'center', toolbar: '#barDemo'}
                ]]
                , id: "idsw"
            });
        })
        //进行按状态查询
        var form;
        layui.use('form', function () {
            form = layui.form;
            form.on('select(selecttype)', function (data) {
                //进行渲染
                //进行渲染
                table.render({
                    elem: '#demo'
                    , height: 471
                    , width: 1113
                    , page: true
                    , url: '/adminsweb?action=finstatus&astatus='+data.value //数据接口
                    , cellMinWidth: 150
                    , cols: [[ //表头
                        {type: 'numbers', title: '序号'}
                        , {field: 'aid', title: '编号', align: 'center'}
                        , {field: 'alname', title: '姓名', align: 'center'}
                        , {field: 'aname', title: '账号', align: 'center'}
                        , {field: 'astatus', title: '状态', align: 'center', templet: '#sexTpl', sort: true}
                        , {field: 'right', title: '操作', width: '118', align: 'center', toolbar: '#barDemo'}
                    ]]
                    , id: "idsw"
                });
            })
        })
    })
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">详细</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
</script>
</body>

</html>